/*
 * Button base styles
 */
.amplify-button {
  // Internal base properties that are updated per variation and color theme
  --amplify-internal-button-background-color: var(
    --amplify-components-button-background-color
  );
  --amplify-internal-button-border-color: var(
    --amplify-components-button-border-color
  );
  --amplify-internal-button-color: var(--amplify-components-button-color);
  --amplify-internal-button-focus-box-shadow: var(
    --amplify-components-button-focus-box-shadow
  );
  --amplify-internal-button-border-width: var(
    --amplify-components-button-border-width
  );

  align-items: center;
  background-color: var(--amplify-internal-button-background-color);
  border-color: var(--amplify-internal-button-border-color);
  border-radius: var(--amplify-components-button-border-radius);
  border-style: var(--amplify-components-button-border-style);
  border-width: var(--amplify-internal-button-border-width);
  box-sizing: border-box;
  color: var(--amplify-internal-button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--amplify-components-button-font-size);
  font-weight: var(--amplify-components-button-font-weight);
  justify-content: center;
  line-height: var(--amplify-components-button-line-height);
  padding-block-start: var(--amplify-components-button-padding-block-start);
  padding-block-end: var(--amplify-components-button-padding-block-end);
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
  transition: all var(--amplify-components-button-transition-duration);
  user-select: none;

  // These are the internal css variables that are used to update the values that are updated by multiple modifiers
  // Disabled
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-disabled-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-disabled-background-color
  );
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-disabled-border-color
  );
  --amplify-internal-button-disabled-text-decoration: initial;

  // Loading
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-loading-color
  );
  --amplify-internal-button-loading-text-decoration: initial;

  &:hover {
    --amplify-internal-button-background-color: var(
      --amplify-components-button-hover-background-color
    );
    --amplify-internal-button-border-color: var(
      --amplify-components-button-hover-border-color
    );
    --amplify-internal-button-color: var(
      --amplify-components-button-hover-color
    );
  }

  &:focus {
    --amplify-internal-button-background-color: var(
      --amplify-components-button-hover-background-color
    );
    --amplify-internal-button-border-color: var(
      --amplify-components-button-focus-border-color
    );
    --amplify-internal-button-color: var(
      --amplify-components-button-focus-color
    );
    box-shadow: var(--amplify-internal-button-focus-box-shadow);
  }

  &:active {
    --amplify-internal-button-background-color: var(
      --amplify-components-button-active-background-color
    );
    --amplify-internal-button-border-color: var(
      --amplify-components-button-active-border-color
    );
    --amplify-internal-button-color: var(
      --amplify-components-button-active-color
    );
  }

  &--fullwidth {
    width: 100%;
  }

  &--outlined {
    &--info {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-outlined-info-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-outlined-info-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-outlined-info-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-info-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-info-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-info-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-info-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-info-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-info-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-outlined-info-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-info-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-info-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-info-active-color
        );
      }
    }
    &--warning {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-outlined-warning-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-outlined-warning-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-outlined-warning-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-warning-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-warning-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-warning-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-warning-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-warning-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-warning-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-outlined-warning-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-warning-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-warning-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-warning-active-color
        );
      }
    }
    &--error {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-outlined-error-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-outlined-error-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-outlined-error-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-error-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-error-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-error-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-error-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-error-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-error-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-outlined-error-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-error-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-error-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-error-active-color
        );
      }
    }
    &--success {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-outlined-success-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-outlined-success-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-outlined-success-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-success-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-success-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-success-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-success-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-success-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-success-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-outlined-success-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-success-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-success-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-success-active-color
        );
      }
    }
    &--overlay {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-outlined-overlay-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-outlined-overlay-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-outlined-overlay-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-overlay-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-overlay-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-overlay-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-overlay-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-overlay-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-overlay-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-outlined-overlay-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-outlined-overlay-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-outlined-overlay-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-outlined-overlay-active-color
        );
      }
    }
  }

  &--menu {
    border-width: var(--amplify-components-button-menu-border-width);
    background-color: var(--amplify-components-button-menu-background-color);
    justify-content: var(--amplify-components-button-menu-justify-content);

    &:hover {
      color: var(--amplify-components-button-menu-hover-color);
      background-color: var(
        --amplify-components-button-menu-hover-background-color
      );
    }

    &:focus {
      box-shadow: none;
      color: var(--amplify-components-button-menu-focus-color);
      background-color: var(
        --amplify-components-button-menu-focus-background-color
      );
    }

    &:active {
      color: var(--amplify-components-button-menu-active-color);
      background-color: var(
        --amplify-components-button-menu-active-background-color
      );
    }

    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-menu-disabled-color
    );
  }

  &--primary {
    --amplify-internal-button-border-width: var(
      --amplify-components-button-primary-border-width
    );
    --amplify-internal-button-background-color: var(
      --amplify-components-button-primary-background-color
    );
    --amplify-internal-button-border-color: var(
      --amplify-components-button-primary-border-color
    );
    --amplify-internal-button-color: var(
      --amplify-components-button-primary-color
    );

    &:hover {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-hover-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-hover-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-hover-color
      );
    }

    &:focus {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-focus-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-focus-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-focus-color
      );
      --amplify-internal-button-focus-box-shadow: var(
        --amplify-components-button-primary-focus-box-shadow
      );
    }

    &:active {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-active-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-active-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-active-color
      );
    }

    &--info {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-info-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-info-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-info-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-info-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-info-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-info-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-info-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-info-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-info-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-primary-info-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-info-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-info-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-info-active-color
        );
      }
    }
    &--warning {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-warning-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-warning-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-warning-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-warning-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-warning-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-warning-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-warning-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-warning-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-warning-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-primary-warning-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-warning-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-warning-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-warning-active-color
        );
      }
    }
    &--error {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-error-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-error-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-error-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-error-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-error-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-error-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-error-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-error-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-error-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-primary-error-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-error-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-error-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-error-active-color
        );
      }
    }
    &--success {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-success-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-success-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-success-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-success-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-success-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-success-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-success-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-success-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-success-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-primary-success-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-success-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-success-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-success-active-color
        );
      }
    }
    &--overlay {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-primary-overlay-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-primary-overlay-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-primary-overlay-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-overlay-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-overlay-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-overlay-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-overlay-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-overlay-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-overlay-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-primary-overlay-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-primary-overlay-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-primary-overlay-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-primary-overlay-active-color
        );
      }
    }
    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-primary-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-primary-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-primary-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-primary-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-primary-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-primary-loading-color
    );
  }

  &--link {
    --amplify-internal-button-border-width: var(
      --amplify-components-button-link-border-width
    );
    --amplify-internal-button-background-color: var(
      --amplify-components-button-link-background-color
    );
    --amplify-internal-button-border-color: var(
      --amplify-components-button-link-border-color
    );
    --amplify-internal-button-color: var(
      --amplify-components-button-link-color
    );

    &:hover {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-hover-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-hover-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-hover-color
      );
    }

    &:focus {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-focus-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-focus-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-focus-color
      );
      --amplify-internal-button-focus-box-shadow: var(
        --amplify-components-button-link-focus-box-shadow
      );
    }

    &:active {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-active-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-active-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-active-color
      );
    }

    &--info {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-info-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-info-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-info-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-info-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-info-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-info-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-info-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-info-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-info-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-link-info-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-info-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-info-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-info-active-color
        );
      }
    }
    &--warning {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-warning-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-warning-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-warning-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-warning-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-warning-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-warning-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-warning-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-warning-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-warning-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-link-warning-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-warning-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-warning-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-warning-active-color
        );
      }
    }
    &--error {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-error-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-error-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-error-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-error-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-error-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-error-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-error-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-error-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-error-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-link-error-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-error-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-error-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-error-active-color
        );
      }
    }
    &--success {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-success-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-success-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-success-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-success-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-success-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-success-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-success-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-success-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-success-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-link-success-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-success-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-success-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-success-active-color
        );
      }
    }
    &--overlay {
      --amplify-internal-button-background-color: var(
        --amplify-components-button-link-overlay-background-color
      );
      --amplify-internal-button-border-color: var(
        --amplify-components-button-link-overlay-border-color
      );
      --amplify-internal-button-color: var(
        --amplify-components-button-link-overlay-color
      );

      &:hover {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-overlay-hover-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-overlay-hover-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-overlay-hover-color
        );
      }

      &:focus {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-overlay-focus-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-overlay-focus-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-overlay-focus-color
        );
        --amplify-internal-button-focus-box-shadow: var(
          --amplify-components-button-link-overlay-focus-box-shadow
        );
      }

      &:active {
        --amplify-internal-button-background-color: var(
          --amplify-components-button-link-overlay-active-background-color
        );
        --amplify-internal-button-border-color: var(
          --amplify-components-button-link-overlay-active-border-color
        );
        --amplify-internal-button-color: var(
          --amplify-components-button-link-overlay-active-color
        );
      }
    }
    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-link-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-link-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-link-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-link-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-link-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-link-loading-color
    );
  }

  &--destructive {
    border-width: var(--amplify-components-button-destructive-border-width);
    background-color: var(
      --amplify-components-button-destructive-background-color
    );
    border-color: var(--amplify-components-button-destructive-border-color);
    color: var(--amplify-components-button-destructive-color);

    &:hover {
      background-color: var(
        --amplify-components-button-destructive-hover-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-hover-border-color
      );
      color: var(--amplify-components-button-destructive-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-destructive-focus-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-focus-border-color
      );
      color: var(--amplify-components-button-destructive-focus-color);
      box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-destructive-active-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-active-border-color
      );
      color: var(--amplify-components-button-destructive-active-color);
    }

    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-destructive-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-destructive-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-destructive-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-destructive-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-destructive-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-destructive-loading-color
    );
  }

  &--warning {
    background-color: var(--amplify-components-button-warning-background-color);
    border-color: var(--amplify-components-button-warning-border-color);
    border-width: var(--amplify-components-button-warning-border-width);
    color: var(--amplify-components-button-warning-color);

    --amplify-internal-button-disabled-text-decoration: none;
    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-warning-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-warning-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-warning-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-warning-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-warning-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-warning-loading-color
    );
    --amplify-internal-button-loading-text-decoration: none;

    &:hover {
      background-color: var(
        --amplify-components-button-warning-hover-background-color
      );
      border-color: var(--amplify-components-button-warning-hover-border-color);
      color: var(--amplify-components-button-warning-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-warning-focus-background-color
      );
      border-color: var(--amplify-components-button-warning-focus-border-color);
      color: var(--amplify-components-button-warning-focus-color);
      box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-warning-active-background-color
      );
      border-color: var(
        --amplify-components-button-warning-active-border-color
      );
      color: var(--amplify-components-button-warning-active-color);
    }
  }

  &--small {
    font-size: var(--amplify-components-button-small-font-size);
    padding-block-start: var(
      --amplify-components-button-small-padding-block-start
    );
    padding-block-end: var(--amplify-components-button-small-padding-block-end);
    padding-inline-start: var(
      --amplify-components-button-small-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-button-small-padding-inline-end
    );
  }

  &--large {
    font-size: var(--amplify-components-button-large-font-size);
    padding-block-start: var(
      --amplify-components-button-large-padding-block-start
    );
    padding-block-end: var(--amplify-components-button-large-padding-block-end);
    padding-inline-start: var(
      --amplify-components-button-large-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-button-large-padding-inline-end
    );
  }

  &--disabled {
    background-color: var(--amplify-internal-button-disabled-background-color);
    border-color: var(--amplify-internal-button-disabled-border-color);
    color: var(--amplify-internal-button-disabled-color);
    text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    cursor: not-allowed;
    &:hover {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
    :focus {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
    &:active {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
  }

  &--loading {
    background-color: var(--amplify-internal-button-loading-background-color);
    border-color: var(--amplify-internal-button-loading-border-color);
    color: var(--amplify-components-button-loading-color);
    text-decoration: var(--amplify-internal-button-loading-text-decoration);
    &:hover {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
    &:focus {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
    &:active {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
  }

  &__loader-wrapper {
    align-items: var(--amplify-components-button-loader-wrapper-align-items);
    gap: var(--amplify-components-button-loader-wrapper-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amplify-button {
    transition: none;
  }
}
